<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义Vue指令</title>
</head>
<!--
1. 注册全局指令
  Vue.directive('my-directive', function(el, binding){
    el.innerHTML = binding.value.toupperCase()
  })
2. 注册局部指令
  directives : {
    'my-directive' : {
        bind (el, binding) {
          el.innerHTML = binding.value.toupperCase()
        }
    }
  }
3. 使用指令
  v-my-directive='xxx'
-->
<!--
需求: 自定义2个指令
  1. 功能类型于v-text, 但转换为全大写
  2. 功能类型于v-text, 但转换为全小写
-->
<body>
    <div id="demo1">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>

    <div id="demo2">
        <p v-upper-text="msg"></p>
        <p v-lower-text="msg"></p>
    </div>
</body>
<script type="text/javascript" src="../vue.js"></script>
<script>
    //定义全局指令
    Vue.directive('upper-text',function (el,binding) {
        //el:是指绑定当前指令的标签;binding:包含指令相关信息的对象
        //console.log(el,binding)
        el.textContent = binding.value.toUpperCase()
    });
    
    const vm = new Vue({
        el:'#demo1',
        data:{
            msg:'Everything Is Be Ok'
        },
        //注册局部指令
        directives:{
            //这个属性名为什么加引号,因为它里面有特殊字符 -
            'lower-text':function (el,binding) {
                console.log(el,binding);
                el.textContent = binding.value.toLowerCase()
            }
        }
    });

    new Vue({
        el: '#demo2',
        data: {
            msg: "I Like You Too"
        }
    })
</script>
</html>